Day 59 & 60 - POST request & Blog Project

#Python #課堂筆記 #100 Days of Code

Posted by pei_______ on 2022-06-07

learning from 100 Days of Code: The Complete Python Pro Bootcamp for 2022

clean blog Download

Learning Point

<!-- 連結css -->
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />

<!-- 連結js -->
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>

<!-- 連結img -->
<header class="masthead" style="background-image: url('{{ url_for('static', filename='assets/img/about-bg.jpg') }}')">
  • POST request
  1. HTML form tag - action
  2. HTML form tag - method
  3. Flask - HTTP methods
# index.html - form

<form action="{{ url_for('go_login') }}" method="post">
        <label>Name</label>
        <input type="text" placeholder="name" name="name">
        <label>Password</label>
        <input type="password" placeholder="password" name="password">
        <button type="submit">OK</button>
    </form>

# main.py - POST & GET

@app.route('/login', methods=['POST', 'GET'])
def go_login():
    error = None
    if request.method == 'POST':
        try:
            name = request.form['name']
            password = request.form['password']
            return f"<h1>Name: {name}, Password: {password}</h1>"
        except KeyError:
            error = 'Invalid username/password'

    return f"<h1>It's NOT POST request<h1>" \
           f"<p>Error: {error}</p>"

main.py

from flask import Flask, render_template, request
import requests
import smtplib
import os

app = Flask(__name__)

post_url = "https://api.npoint.io/46e5db86a271b1e8bd5c"
post_response = requests.get(post_url)
posts = post_response.json()

MY_EMAIL = os.environ['MY_EMAIL']
PASSWORD = os.environ['PASSWORD']


@app.route("/")
def home_page():
    return render_template("index.html", posts=posts)


@app.route("/post/<index>")
def go_post(index):
    index = int(index)
    return render_template("post.html", post=posts[index])


@app.route("/about")
def go_about():
    return render_template("about.html")


@app.route("/contact", methods=['GET'])
def go_contact():
    return render_template("contact.html", method='get')


@app.route("/contact", methods=['POST'])
def receive_data():
    name = request.form['name']
    email = request.form['email']
    phone = request.form['phone']
    msg = request.form['msg']

    with smtplib.SMTP("smtp.gmail.com", 587, timeout=120) as smtp:
        smtp.starttls()
        smtp.login(user=MY_EMAIL, password=PASSWORD)
        smtp.sendmail(from_addr=MY_EMAIL,
                      to_addrs=MY_EMAIL,
                      msg=f"Subject:From Clean Blog\n\n"
                          f"name: {name}\nphone: {phone}\n"
                          f"email: {email}\nmsg: {msg}".encode('utf-8'))

    return render_template("contact.html", method='post')


if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">

{% include 'header.html' %}

<body>

    <!-- Navigation-->
    {% include 'navigation.html' %}

    <!-- Page Header-->
    <header class="masthead" style="background-image: url('{{ url_for('static', filename='assets/img/home-bg.jpg')}}')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading">
                        <h1>Clean Blog</h1>
                        <span class="subheading">A Blog Theme by Start Bootstrap</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content-->
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">


                {% for post in posts %}
                <!-- Post preview-->
                <div class="post-preview">
                    <a href="{{ url_for('go_post', index=post.id - 1) }}">
                        <h2 class="post-title">{{ post.title }}</h2>
                        <h3 class="post-subtitle">{{ post.subtitle }}</h3>
                    </a>
                    <p class="post-meta">
                        Posted by
                        <a href="{{ url_for('home_page') }}">{{ post.author }}</a>
                        on {{ post.date }}

                    </p>
                </div>
                <!-- Divider-->
                <hr class="my-4" />
                {% endfor %}


                <!-- Pager-->
                <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
            </div>
        </div>
    </div>

    <!-- Footer-->
    {% include 'footer.html' %}

</body>
</html>

post.html

<!DOCTYPE html>
<html lang="en">

{% include 'header.html' %}

    <body>
        <!-- Navigation-->
        {% include 'navigation.html' %}

        <!-- Page Header-->
        <header class="masthead" style="background-image: url('{{ url_for('static', filename='assets/img/post-bg.jpg') }}')">
            <div class="container position-relative px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="post-heading">
                            <h1>{{ post.title }}</h1>
                            <h2 class="subheading">{{ post.subtitle }}</h2>
                            <span class="meta">
                                Posted by
                                <a href="#!">{{ post.author }}</a>
                                on {{ post.date }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Post Content-->
        <article class="mb-4">
            <div class="container px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                            <p>{{ post.body }}</p>
                    </div>
                </div>
            </div>
        </article>

        <!-- Footer-->
        {% include 'footer.html' %}

    </body>
</html>

header.html

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Clean Blog - Start Bootstrap Theme</title>
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>

    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />

    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />
</head>

navigation.html

<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="index.html">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto py-4 py-lg-0">
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ url_for('home_page') }}">Home</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ url_for('go_about') }}">About</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ url_for('go_contact') }}">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

footer.html

<footer class="border-top">
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <ul class="list-inline text-center">
                    <li class="list-inline-item">
                        <a href="#!">
                            <span class="fa-stack fa-lg">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#!">
                            <span class="fa-stack fa-lg">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#!">
                            <span class="fa-stack fa-lg">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                </ul>
                <div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2022</div>
            </div>
        </div>
    </div>
</footer>

    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Core theme JS-->
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>

#Python #課堂筆記 #100 Days of Code

pei_______




Related Posts

Switch between uppercase to lowercase

Switch between uppercase to lowercase

 Christy
兩年過後，我能夠被稱為資深工程師了嗎？

兩年過後，我能夠被稱為資深工程師了嗎？

 huli
從前端傳資料給後端（GET, POST）、從 PHP 連線到 MySQL 資料庫

從前端傳資料給後端（GET, POST）、從 PHP 連線到 MySQL 資料庫

 saffran

Comments